<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 图片区域 */
        
        .preview_img {
            position: absolute;
            width: 398px;
            height: 398px;
            border: 1px solid #ccc;
        }
        
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: burlywood;
            opacity: 0.5;
            cursor: move;
            display: none;

        }
        
        .big {
            position: absolute;
            top: 0;
            left: 500px;
            border: 1px solid #ccc;
            width: 500px;
            height: 600px;
            overflow: hidden;
            display: none;
        }
        
        .bigIMg {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- 图片预览区域 -->
    <div class="preview_img">
        <!-- 图片 -->
        <img src="images/phone.png" alt="">
        <!-- 放大镜 -->
        <div class="mask"></div>
        <!-- 展示放大后图片效果 -->
        <div class="big">
            <img src="images/bigphone.png" alt="" class="bigIMg">
        </div>
    </div>
    <!-- <script src="js/big.js"></scrip> -->
</body>
<script>
    $(function () {
        // 获取相关元素的 jQuery 对象
        var $preview_img = $('.preview_img')
        var $big = $('.big')
        var $mask = $('.mask')
        var $bigIMg = $('.bigIMg')
        // 当鼠标移入预览图片区域时，显示放大镜和大图容器
        $preview_img.on('mouseover',function () {
            $big.show()
            $mask.show()
        })

        // 当鼠标移出预览图片区域时，隐藏放大镜和大图容器
        $preview_img.on('mouseout',function () {
            $big.hide()
            $mask.hide()
        })

        // 当鼠标在预览图片区域移动时
        $preview_img.on('mousemove',function(e){
            // 获取鼠标在预览图片区域中的坐标
            var x = e.pageX - $(this).offset().left
            var y = e.pageY - $(this).offset().top
            // 计算放大镜的偏移量
            var maskX = x - $mask.width() / 2
            var maskY = y - $mask.height() / 2
            // 确定放大镜在预览图片区域内的最大偏移量
            var maskMax = $preview_img.width() - $mask.width();
            // 限制放大镜的偏移量在合法范围内
            maskX = Math.max(0,Math.min(maskMax,maskX))
            maskY = Math.max(0,Math.min(maskMax,maskY))
            // 设置放大镜的位置
            $mask.css({left:maskX,top: maskY})
            // 计算大图中对应位置的偏移量
            var bigMax = $bigIMg.width() - $big.width()
            var bigX = maskX * bigMax / maskMax
            var bigY = maskY * bigMax / maskMax
            // 设置大图的位置
            $bigIMg.css({left:-bigX,top:-bigY})
        })

    });

</script>
</html>